<template>
  <div class="project zy-content ">
    <div class="title">
      <span>使用工具维护</span>
      <div class="icon">
        <span class="creatBtnright" @click="handleAdd" v-if="checkBtnPermission.workorderToolAdd">
          <span><Icon type="ios-add-circle" color="#187BDB" /></span>
          <span class="rightbtn">添加工具</span>
        </span>
      </div>
    </div>
      <Form :label-width="100" class="search-form">
          <Row>
              <Col :span="span">
                  <FormItem label="使用工具：">
                      <Input type="text" v-model="searchParams.toolName" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                  </FormItem>
              </Col>
              <Col :span="span">
                  <FormItem label="保存方式：">
                      <Input type="text" v-model="searchParams.keepType" clearable :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
                  </FormItem>
              </Col>
              <Col :span="span" align="center">
                  <Button type="primary" @click="changeNum" v-if="checkBtnPermission.workorderToolList">{{$t('common.Query')}}</Button>
              </Col>
          </Row>
      </Form>
      <div class="tableContent">
          <Table class="recycleBinTable" ellipsis ref="selection" :columns="columns" :data="data"  @on-selection-change="onSelectChange">
              <template slot-scope="{ row }" slot="action">
                  <span class="operationBtn" @click="handleDelete(row)" v-if="checkBtnPermission.workorderToolDel">{{$t('common.Delete')}}</span>
                  <span class="operationBtn" @click="handleEdit(row)" v-if="checkBtnPermission.workorderToolEdit">{{$t('common.Edit')}}</span>
              </template>
          </Table>
      </div>
      <div class="pageWrap">
          <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
      </div>
      <!--工具模态框-->
      <tool-maintenance-modal ref="toolMaintenanceModal" @refresh="handleRefresh"/>
      <Modal :mask-closable="false"
              v-model="delelteVisible"
              title="">
          <Row class="enableContent">
              <Col span="24" class="enableContentInner">
                  <img width="95px" src="~images/event/del.png" alt="">
              </Col>
              <Col span="24" class="enableTips">
                  <span>{{$t('common.sureDelete')}}</span>
              </Col>
          </Row>
          <div slot="footer">
              <Button type="default"  @click="delelteVisible = false">{{$t('common.Cancle')}}</Button>
              <Button type="primary" :loading="delLoading" @click="handleDeleteOk">{{$t('maintenance.Confirmed')}}</Button>
          </div>
      </Modal>
  </div>
</template>

<script>
    import toolMaintenanceModal from './modules/toolMaintenanceModal'
    export default {
      name: "recycleBin",
      components: {
          toolMaintenanceModal
      },
        data() {
            return {
                delId: '',
                delLoading: false,
                delelteVisible: false,
                pageNum:1,
                pageSize:10,
                total:0,
                pageSizeOption: [10,20,30,40],
                span: 6,
                searchParams: {},
                checkBtnPermission: {},
                columns: [
                    {
                        title: '物料代码',
                        key: 'toolCode',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: '使用工具',
                        key: 'toolName',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'toolModel',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: '品牌',
                        key: 'toolBrand',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: `${this.$t('spareParts.quantity')}`,
                        key: 'toolNum',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                         title: `${ this.$t('maintenance.safekeeping') }`,
                        key: 'keepType',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: '创建人',
                        key: 'realname',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        align: 'center',
                        minWidth: 200,
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        minWidth: 200,
                        align: 'center',
                        fixed: 'right'
                    },
                ],
                data: [],
            }
        },
        created() {
            this.changeNum()
        },
        mounted() {
            let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
            for(let item of itemList){
                if(item.code=="workorderToolAdd"){
                    this.checkBtnPermission.workorderToolAdd = true
                }
                if(item.code=="workorderToolEdit"){
                    this.checkBtnPermission.workorderToolEdit = true
                }
                if(item.code=="workorderToolDel"){
                    this.checkBtnPermission.workorderToolDel = true
                }
                if(item.code=="workorderToolList"){
                    this.checkBtnPermission.workorderToolList = true
                }
            }
        },
        methods: {
            //新增
            handleAdd() {
                this.$refs.toolMaintenanceModal.show('add')
            },
            handleDelete(record) {
                this.delelteVisible = true
                this.delId = record.id
            },
            //编辑
            handleEdit(record) {
                this.$refs.toolMaintenanceModal.show('edit',record)
            },
            onSelectChange() {

            },
            //刷新
            handleRefresh() {
                this.searchList()
            },
            //分页
            changeNum(){
                this.pageNum = 1;
                this.searchList();
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.searchList();
            },
            changePageNum(val){
                this.pageNum = val;
                this.searchList();
            },
            searchList(){//查询列表
                let params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                };
                for (let key in this.searchParams) {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
                // if(this.searchParams.status==3){
                //   params.status = 0
                // }
                // if(this.dateList[1]){
                //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
                //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
                // }
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderTool/list',
                    params: params
                }).then(res => {
                    if(res.code === 200){
                        this.data = res.data.record
                        this.total = res.data.total
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                })
            },
            handleDeleteOk() {
                this.axios({
                    method: 'delete',
                    url: '/workorder/workorderTool/del',
                    data: {
                        id: this.delId
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.searchList()
                        this.$Message.success('删除成功！')
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.delelteVisible = false
                })
            }
        }
}
</script>

<style scoped lang="scss">
  .project{
    //background: #ffffff;
    height: calc(100vh - 150px);
    .title{
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
      .icon {
        display: flex;
         .creatBtnright {
          display: flex;
          align-items: center;
          font-size: 16px;
          i {
            font-size: 36px;
          }
        }
      }
    }
  }

</style>
